<!-- /*
 * @Author: RDSunday 
 * @Date: 2020-03-22 08:10:11 
 * @Last Modified by:   RDSunday 
 <!-- * @Last Modified time: 2020-03-22 08:10:11  -->
 <!-- */ -->
 <!-- 选项卡垂直方向 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         * {
             box-sizing: border-box;
         }
         body {
             font-family: Arial, Helvetica, sans-serif;
         }
         /* style the tab */
         div.tab {
            float:left;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            width: 30%;
            height: 300px;
         }
         /* style the button inside the tab */
         div.tab button {
             display: block;
             background-color: inherit;
             color: black;
             padding: 22px 16px;
             border: none;
             outline: none;
             text-align: left;
             cursor: pointer;
             /* 过度样式 */
             transition: 0.3s;
             font-size: 18px;
         }
         /* change background color of the buttons on hover */
         div.tab button:hover {
             background-color: #ddd;
         }
         /* create an active /current "tab button" class */
         div.tab button.active {
             background-color: #ccc;

         }
         /* style the tab content */
         .tabcontent {
             float: left;
             padding: 0px 12px;
             border: 1px solid #ccc;
             width: 70%;
             border-left: none;
             height: 300px;
         }
     </style>
 </head>
 <body>
     <p>点击各个选项切换内容</p>
     <!-- 选项卡盒子 -->
     <div class="tab">
         <!-- 选项卡按钮 -->
         <button class="tablinks" onclick="openCity(event,'London')" id="defaultOpen">London</button>
         <button class="tablinks" onclick="openCity(event,'Paris')">Paris</button>
         <button class="tablinks" onclick="openCity(event,'Tokyo')">Tokyo</button>

     </div>
     <!-- 选项卡内容 -->
     <div id="London" class="tabcontent">
         <h3>London</h3>
         <p>LOndon is the capital city of England</p>

     </div>
     <div id="Paris" class="tabcontent">
         <h3>Paris</h3>
         <p>Paris is the capital of France</p>

     </div>
     <div id="Tokyo" class="tabcontent">
         <h3>Tokyo</h3>
         <p>Tokyo is the capital of Japan</p>
     </div>
     <script>
         function openCity(evt, cityName) {
                var i, tabcontent, tablinks;
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }
                document.getElementById(cityName).style.display = "block";
                evt.currentTarget.className += " active";
            }

// 触发 id="defaultOpen" click 事件
document.getElementById("defaultOpen").click();
        //  function openCity(evt, cityName) {
        //      var i, tabcontent, tablinks;
        //      tabcontent = document.getElementsByClassName("tabcontent");
        //     //  tabcontent 全部都不显示
        //      for (i = 0; i< tabcontent.lenght; i++) {
        //          tabcontent[i].style.display = "none";
        //      }
        //      tablinks = document.getElementsByClassName("tablinks");
        //     //  每个按钮都恢复原来的classname,
        //      for (i = 0 ;i< tablinks.length; i++)  {
        //          tablinks[i].className = tablinks[i].className.replace("active", "");
        //      }
        //      document.getElementById(cityName).style.display = "block";
        //      evt.currentTarget.className += "active";
        //  }
        // //  触发id="defaultOpen"click 事件
        // document.getElementById("defaultOpen").click();
     </script>
 </body>
 </html>
